<template>
	<view :style="skin" class="losePage">

		<block v-if="showPage">
			<view class="listMain">
				<view class="overdueList" v-for="(item,index) in list" :key="index" @click="handleView(item)">
					<view class="overdueListLeft">
						<u--image shape="circle" :src="src" width="75px" height="75px"></u--image>
					</view>
					<view class="overdueListRight">
						<view class="rightTips">
							{{$t('lease.productModel')}}: {{item.productModel}}
						</view>
						<view class="rightTips">
							{{$t('lease.productID')}}: {{item.productId}}
						</view>
						<view class="rightTips">
							{{$t('property.faultType')}}: {{item.faultCode}}
						</view>
						<view class="rightTips">
							{{$t('property.faultReportingDate')}}: {{item.faultDate}}
						</view>
						<text class="iconfont icon-a-mingchengarrow_right iconCheck"></text>
					</view>

				</view>
			</view>
			<view class="confir">
				<u-button color="var(--subjectColor)" @click="handleFault">{{$t('property.faultReporting')}}
				</u-button>

			</view>
		</block>

		<block v-else>
			<view class="title">{{$t('property.reportLoss')}}
				<text class="iconfont icon-a-mingchengarrow_left iconLeft" @click="showPage = true"></text>
			</view>

			<view class="listMain">
				<view class="overdueList">
					<view class="overdueListLeft">
						<u--image shape="circle" :src="src" width="75px" height="75px"></u--image>
					</view>
					<view class="overdueListRight">
						<view class="rightTips">
							{{$t('lease.productModel')}}: {{actionObj.productModel}}
						</view>
						<view class="rightTips">
							{{$t('lease.productID')}}: {{actionObj.productId}}
						</view>
						<view class="rightTips">
							{{$t('property.faultType')}}: {{actionObj.faultCode}}
						</view>
						<view class="rightTips">
							{{$t('property.faultReportingDate')}}: {{actionObj.faultDate}}
						</view>
					</view>

				</view>
				<view class="confir">
					<!-- <u-button color="var(--subjectColor)" @click="handleClick(1)">{{$t('me.repair')}}
					</u-button> -->
					<u-button customStyle="margin-left: 10px;" color="var(--subjectColor)"
						@click="handleClick(2)">{{$t('me.repaired')}}
					</u-button>
				</view>
			</view>


		</block>



		<u-modal showCancelButton :show="modelShow" :content='content' @confirm="modelConfirm"
			@cancel="modelCancel"></u-modal>


	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import {
		pageStockFault,
		maintain
	} from '@/api/leaProductFault.js'
	import {
		addDevice
	} from '@/utils/sql/sqlDevice.js'
	export default {
		data() {
			return {
				src: '',
				showPage: true,
				checkIndex: -1,
				modelShow: false,
				content: '',
				list: [],
				actionObj: {}
			};
		},
		computed: {
			...mapState({
				skin: state => state.theme.skin
			})

		},
		mounted() {
			let that = this
			this.getMalList()
			uni.$on('update_malList',function(data){
				console.log('getMalList');
				that.getMalList()
			})
		},

		methods: {
			handleView(item) {
				this.actionObj = item
				this.showPage = false
			},
			getMalList() {
				pageStockFault().then(res => {
					console.log(res);
					if (res.code == 0) {
						this.list = res.data.records
					}
				})
			},
			handleFault() {
				let netWork = uni.getStorageSync('isNetWork');
				console.log(netWork);
				if(netWork){
					uni.showToast({
						title:'No Network',
						icon:'none',
						duration:2000
					})
					return false
				}
				uni.navigateTo({
					url: '/pages/property/faultReporting/faultReporting?type=mal'
				})
			},
			handleClick(num) {
				if (num == 1) {
					// uni.navigateTo({
					// 	url:'/pages/property/faultReporting/faultReporting'
					// })
					this.$emit('maintain')
				} else {
					// this.content = `确定型号为${this.actionObj.productModel}的${this.actionObj.productId}已经维修好吗`
					this.content = 'Make sure the equipment is repaired'
					this.modelShow = true
				}
			},
			handleDevice(item, index) {
				this.checkIndex = index
			},
			modelConfirm() {
				uni.showLoading({
					title:'Loading'
				})
				
				maintain({
					id: this.actionObj.id,
					maintainFlag: '2'
				}).then(res => {
					console.log(res);
					this.modelShow = false
					uni.hideLoading()
					if (res.code == 0) {
						uni.showToast({
							title: 'repaired',
							icon: 'none'
						})
						
						this.showPage = true
						this.getMalList();
						uni.$emit('repairHandle');
						// let obj = {
						// 	productId: this.actionObj.productId,
						// 	stockStatus: 1
						// }
						// addDevice(obj)
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}

				})

			},
			modelCancel() {
				this.modelShow = false
			}

		}
	}
</script>

<style lang="scss" scoped>
	.losePage {
		padding: 16px;
		box-sizing: border-box;
		height: 100%;
		position: relative;

		.title {
			width: 100%;
			height: 55px;
			background-color: #4080FF;
			text-align: center;
			line-height: 62px;
			margin-bottom: 16px;
			color: #fff;
			border-radius: 8px;
			position: relative;

			.iconLeft {
				position: absolute;
				left: 0;
				top: 50%;
				transform: translate(0%, -50%);
			}
		}

		.listMain {
			height: calc(100% - 60px);
			overflow-y: auto;

			.title {
				width: 100%;
				height: 55px;
				background-color: #4080FF;
				text-align: center;
				line-height: 62px;
				margin-bottom: 16px;
				color: #fff;
				border-radius: 8px;
				position: relative;

				.iconLeft {
					position: absolute;
					left: 0;
					top: 50%;
					transform: translate(0%, -50%);
				}
			}
		}

		.overdueList {
			width: 100%;
			padding: 16px 0;
			box-sizing: border-box;
			height: 120px;
			display: flex;
			background-color: #fff;
			border: 1px solid #ccc;
			margin-bottom: 8px;

			.overdueListLeft {
				width: 102px;
				height: calc(100% - 16px);
				margin-top: 8px;
				border-right: 1px solid #ccc;
				display: flex;
				flex-direction: column;
				align-items: center;

				.leftTips {
					width: 96px;

				}
			}

			.overdueListRight {
				font-size: 14px;
				color: #101010;
				padding-left: 16px;
				box-sizing: border-box;
				position: relative;
				width: 200px;

				.iconCheck {
					position: absolute;
					top: 50%;
					right: -40px;
					transform: translate(-50%, -50%);
				}

				.actionIcon {
					color: #4080FF;
				}

				.unActionIcon {
					color: #ccc;
				}

				.rightTips {
					line-height: 22px;

					.iconRight {
						float: right;
					}
				}
			}
		}

		.overdueInfo {
			height: 200px;
			margin-bottom: 16px;
		}

		.confir {
			width: 100%;
			margin: 16px auto 0;
			height: 48px;
			display: flex;
			align-items: center;
			justify-content: space-evenly;
		}
	}
</style>